/**
 * User: Célia Calçada
 * Date: 10-08-2013
 * Poi navigation view
 */

Ext.define('Mobile-app.view.Poi', {
    extend: 'Ext.navigation.View',
    alias: 'widget.poipanel',

    config: {
        title: 'POI',
        iconCls: 'favorites',
        navigationBar: false,

        items: [
            {
                id: 'poiList',
                fullscreen: true,
                xtype: 'list',
                style: 'font-size:70%',
                cls: 'panel-letter',

                itemTpl: new Ext.XTemplate('<table border=0>',
                    '<tr>',
                    '<td><b>' + $.t('main.name') + '</b>:</b> {name}</td>',
                    '</tr>',
                    '<tr>',
                    '<td><b>', $.t('main.description') + ':</b> {description}</td>',
                    '</tr>',
                    '<tr>',
                    '<td><b>', $.t('main.category'), ':</b> {category}</td>',
                    '</tr>',
                    '</table>'),

                store: Ext.create('Ext.data.Store', {
                    model: 'Mobile-app.model.Poi'
                }),
                items: [
                    {
                        xtype: 'toolbar',
                        docked: 'top',

                        items: [
                            { xtype: 'spacer' },
                            {
                                itemId: 'search',
                                xtype: 'searchfield',
                                placeHolder: $.t('main.search') + '...'
                            },
                            { xtype: 'spacer' }
                        ]
                    }
                ]
            }  // end items
        ],
        listeners: [
            {
                event: 'painted',
                fn: 'loadStore'
            },
            {
                delegate: '#poiList',
                event: 'itemtap',
                fn: 'showDetails'
            },
            {
                delegate: '#search',
                event: 'keyup',
                fn: 'filterList'
            },
            {
                delegate: '#search',
                event: 'clearicontap',
                fn: 'clearFilter'
            }
        ]
    },

    /***
     * Will load the POI list
     */
    loadStore: function () {

        this.fireEvent('loadStore', this.down('list'));
    },

    /***
     * Called whenever an item of this list is tapped
     * @param list Ext.DataView.List
     * @param index The index of the item tappe
     * @param target The element or DataItem tapped
     * @param record The record associated to the item
     * @param e The event object
     * @param eOpts The options object passed to Ext.util.Observable.addListener
     */
    showDetails: function (list, index, target, record, e, eOpts) {

        this.fireEvent('showDetails', list, record);
    },

    /***
     * The search field
     * @param field
     */
    filterList: function(field){
        this.fireEvent('filterList', this, this.down('list'), field);
    },

    /***
     * Will clear the filter on the list
     */
    clearFilter: function(){

        this.fireEvent('clearFilter', this.down('list'));

    }

});